<template>
  <el-dialog
    v-model="dialogVisible"
    width="80%"
    class="pre-view-article"
    @close="handleClose"
    top="3vh"
    :show-close="false"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="header-box flex justify-end position-absolute top--2 right--2">
        <el-button icon="close" circle @click="handleClose" />
      </div>
    </template>
    <!-- 图文展示模版 -->
    <NormalContent
      :articleData="props.articleData"
      v-if="articleData.templateType == '1'"
      @addComment="addCommentAction"
      @report="reportAction"
    />
    <!-- 图文交叉模版 -->
    <CrossContent
      :articleData="props.articleData"
      v-else-if="articleData.templateType == '2'"
      @addComment="addCommentAction"
    />
    <EditorConternt
      :articleData="props.articleData"
      v-else-if="articleData.templateType == '3'"
      @addComment="addCommentAction"
      @report="reportAction"
    ></EditorConternt>
  </el-dialog>
  <ReportDrawer ref="reportDrawerRef" />
</template>
<script setup>
import { typeIdEnum } from "@/utils/articleConfig";
import NormalContent from "./NormalContent.vue";
import CrossContent from "./CrossContent.vue";
import EditorConternt from "./EditorConternt.vue";
import ReportDrawer from "@/components/ReportDrawer/index.vue";
import { REPORT_SOURCE } from "@/enums/aritcle/aritcle";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  articleData: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["update:modelValue"]);
const dialogVisible = ref(props.modelValue);
const handleClose = () => {
  emit("update:modelValue", false);
};
const images = ref([]);
const content = ref("");
const addCommentAction = () => {
  console.log("addCommentAction", props.articleData);
};
const reportDrawerRef = ref(null);
const reportAction = async (comment) => {
  console.log("reportAction", comment);
  reportDrawerRef.value.openDrawer(comment, REPORT_SOURCE.COMMENT);
};
watch(
  () => props.modelValue,
  (newVal) => {
    dialogVisible.value = newVal;
    images.value = [];
    if (!props.articleData?.blocks) return;
    props.articleData.blocks.forEach((item) => {
      if (item.type === typeIdEnum.picture) {
        images.value.push(`${import.meta.env.VITE_API_IMAGE}/${item.text}`);
      }
      if (item.type === typeIdEnum.text) {
        content.value = item.text;
      }
    });
  }
);
</script>

<style scoped lang="scss">
:deep(.el-dialog__header) {
  padding-bottom: 0 !important;
}

:deep(.el-overlay-dialog) {
  overflow: hidden !important;
}

.pre-view-article-body {
  height: 90vh;
}

.pre-view-article {
  border-radius: 20px;
  height: 90vh;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
